<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>index</title>
    <!-- 引入Vue -->
    <script type="text/javascript" src="../../vue.js"></script>
  </head>
  <body>
    <!-- 准备好一个容器-->
    <div id="demo">
      <h1>a数据，能怎么用</h1>
      <h2>{{a}}</h2>
      <h2 :x="a">你好</h2>
      <input type="text" v-model="a">
      <h2 v-if="a">Hello</h2>
      <h2 v-show="a">Hello</h2>
      <span>=================</span>
      <h2 v-for="(number,index) in a">{{number}}</h2>
      <hr>

      <h1>b方法，能怎么用</h1>
      <button @click="b">点我</button>
      <h2>{{b()}}</h2>
      <hr>

      <h1>c计算数据，能怎么用</h1>
      <h2>{{c}}</h2>
      <h2 :x="c">你好</h2>
      <input type="text" v-model="c">
      <h2 v-if="c">Hello</h2>
      <h2 v-show="c">Hello</h2>
      <span>=================</span>
      <h2 v-for="(number,index) in c">{{number}}</h2>
    </div>

    <script type="text/javascript">
      new Vue({
        el:'#demo',
        data:{
          a:1
        },
        methods:{
          b(){
            console.log('b被调用了')
            return 789
          }
        },
        computed:{
          c:{
            get(){
              return this.a * 100
            },
            set(value){
              console.log('c被修改了',value)
            }
          }
        },
        watch:{
          a(value){
            console.log('a变化了',value)
          }
        }
      })
    </script>
  </body>
</html>